<template>
    <div id="main" style="width: 500px ; height: 500px;">

    </div>
</template>

<script setup lang="ts">
import { getsimpleData } from "@/api/Eatchs"
import {reactive} from "vue"
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    VisualMapComponent,
    VisualMapComponentOption
} from 'echarts/components';
import { PieChart, PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';

echarts.use([
    TitleComponent,
    TooltipComponent,
    VisualMapComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);

type EChartsOption = echarts.ComposeOption<
    | TitleComponentOption
    | TooltipComponentOption
    | VisualMapComponentOption
    | PieSeriesOption
>;

// 发请求
const EatchsWeek = reactive([])
const EatchsVal = reactive([])
const getEatchsApiData = async () => {
    let res = await getsimpleData()
    if (res.data.code == "200") {
        res.data.data.forEach(element => {
            EatchsWeek.push(element.x)
            EatchsVal.push(element.val)
        });
        EachsDatabiao()

    }
}



const EachsDatabiao=()=>{
    var chartDom = document.getElementById('main') as HTMLElement;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        backgroundColor: '#2c343c',

        title: {
            text: '嗨购App一周销售图',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            }
        },

        tooltip: {
            trigger: 'item'
        },

        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series: [
            {
                name: '嗨购',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                    { value: EatchsVal[0], name: EatchsWeek[0] },
                    { value: EatchsVal[1], name: EatchsWeek[1] },
                    { value: EatchsVal[2], name: EatchsWeek[2] },
                    { value: EatchsVal[3], name: EatchsWeek[3] },
                    { value: EatchsVal[4], name: EatchsWeek[4] },
                    { value: EatchsVal[5], name: EatchsWeek[5] },
                    { value: EatchsVal[6], name: EatchsWeek[6] },
                    { value: EatchsVal[7], name: EatchsWeek[7] },
                ].sort(function (a, b) {
                    return a.value - b.value;
                }),
                roseType: 'radius',
                label: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                labelLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
    };

    option && myChart.setOption(option);
}

onMounted(() => {
    getEatchsApiData()
    
})




</script>

<style scoped>

</style>